<!-- 出库订单审核管理 -->
<template>
    <div class="page-box">
        <div class="page-title">
            {{ '补库订单审核' }}
        </div>

        <div class="page-search">
            <div class="search-box" :style="{ height: IsHeight }">
                <el-input v-model="pageData.keywords" placeholder="采购单号/供应商/负责人" style="width: 200px; margin-right: 10px"
                    suffix-icon="search" />

            </div>
            <div class="search-btn">
                <div class="btn_item" @click="handleClickHeight">
                    <img class="btn_img" src="@/assets/sx.png" alt="" />
                    <span> 高级筛选 </span>
                </div>
            </div>
        </div>
        <div class="search-btn-right">
            <!-- <el-button color="#626aef" type="primary" @click="handleClickAdd"> 新增 </el-button> -->
        </div>
    </div>

    <div class="table-box">

        <el-table :data="tabeData" style="width: 100%" v-loading="loading" border>
            <el-table-column type="selection" width="55" />
                <el-table-column align="center" prop="order_no" label="出库单号" width="auto" />
                <el-table-column align="center" prop="total_amount" label="出库金额（元）" width="auto">
                </el-table-column>
                <el-table-column align="center" prop="created_at" label="下单日期" width="auto">
                </el-table-column>
                <el-table-column align="center" prop="delivery_date" label="交货日期" width="auto" />
                <el-table-column align="center" prop="type_text" label="订单类型" width="auto" />
                <el-table-column align="center" prop="customer_name" label="客户名称" width="auto" />
                <el-table-column align="center" prop="customer_phone" label="联系电话" width="auto" />
                <el-table-column align="center" prop="category_name" label="地区" width="auto">
                    <template #default="scope">
                        <span>{{ scope.row.province + ' 省' + scope.row.city + ' 市' + scope.row.area + ' 区' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="address" label="详细地址" width="auto" />
                <el-table-column align="center" prop="status_text" label="状态" width="auto">
                    <template #default="scope">
                        <el-tag  size="small">
                            {{ scope.row.status_text }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="contact_name" label="出库负责人" width="auto" />
                <el-table-column align="center" prop="contact_phone" label="负责人电话" width="auto" />
                <el-table-column align="center" prop="creator_name" label="创建人" width="auto" />
                <el-table-column align="center" prop="note" label="备注" width="auto" />
                <el-table-column align="center" prop="created_at" label="创建时间" width="auto" />
            <el-table-column fixed="right" label="操作" min-width="150" prop="id" align="center">
                <template #default="scope">
                    <div class="btn-box">
                        <el-button plain size="small" type="primary" @click="handleClick(scope.row)"> 审核 </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <Pagination class="pagination" @pageSize="pageSize" @getPage="getPage" :page="pageData.page"
        :page-size="pageData.pageSize" :total="total" />
    <!-- 审核弹窗 -->
    <OutboundAuditAction ref="outboundAuditActionRef" :dialogRow="dialogRow" @refresh="getAlltabeData" />
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import Pagination from "@/components/Pagination.vue";
import OutboundAuditAction from "./components/OutboundAudit/OutboundAuditAction.vue";
import api from "@/api";
import { ElMessage } from "element-plus";

let IsHeight = ref<number | string>(0);
//  -----------------出库详情抽屉


// 出库订单详情
let dialogRow = ref<any>({} as any);
//  -----------------列表数据
const pageData = ref({
    pageSize: 10,
    page: 1,
    customer_id: "",
    keywords: "",
    status: 1,
});
const total = ref(0);
const tabeData = ref([]);
// 侦听动态分页
watch(
    () => {
        return pageData.value;
    },
    () => {
        getAlltabeData();
    },
    { deep: true }
);

let nub = ref<number>(0);
const handleClickHeight = () => {
    nub.value++;
    if (nub.value % 2 == 1) {
        IsHeight.value = '50px';
    } else {
        IsHeight.value = '0px';
    }
}

const pageSize = (e: number) => {

    pageData.value.pageSize = e
}
const getPage = (e: number) => {
    pageData.value.page = e
}


// 获取出库订单列表 
const getAlltabeData = async () => {
    try {
        const res = await api.Outbound.getoutboundOrderList({
            ...pageData.value,
        });

        console.log('出库订单列表:', res);

        if (res.code == 200) {
            tabeData.value = res.data.data;
            total.value = res.data.pager.total_records ;
        }
    } catch (error) {
        console.error('获取出库订单列表失败:', error);
        ElMessage.error('获取列表失败');
    }
};

const loading = ref(false);

const outboundAuditActionRef = ref<any>(null); // 审核弹窗ref
    onMounted(() => {
    getAlltabeData();
})
// 打开审核弹窗
const handleClick = async (row: any) => {
    const res = await api.Outbound.getoutboundOrderDetails({ id: row.id });
    if (res.code == 200) {
        outboundAuditActionRef.value.openLoading(res.data);
    }
};

</script>

<style lang="scss" scoped>
.btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

// 输入框样式
::v-deep .el-input__wrapper {
    background-color: rgba(250, 252, 251, 1);
}

//表格样式

::v-deep .el-table {
    --el-table-header-bg-color: rgba(235, 236, 240, 1);
}

::v-deep .el-table thead {
    color: #444;
}

//分页样式
.pagination {
    width: calc(100% - 250px);
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding-top: 10px;
    border-top: 1px solid #98989848;


}

::v-deep .el-pagination.is-background .el-pager li.is-active {
    background-color: #000 !important;
}
</style>
